import React from 'react';

import { Text, TextInput, TouchableOpacity, View } from 'react-native';
import { Icon, useAppTheme } from 'tsun-smart-ui';

type FormInputFieldProps = {
  label: string;
  value: string | undefined | null;
  onChangeValue: (text: string) => void;
  placeholder: string;
  required?: boolean;
  editable?: boolean;
  maxLength?: number;
};

export const FormInputField: React.FC<FormInputFieldProps> = React.memo(
  (props) => {
    const appTheme = useAppTheme();
    const required = props.required ?? false;
    return (
      <View className="gap-2">
        <Text className="text-text2 font-[15px]">
          {props.label}
          {required && <Text className="text-red-500 font-[16px]"> *</Text>}
        </Text>
        <TextInput
          value={props.value ?? undefined}
          onChangeText={props.onChangeValue}
          placeholder={props.placeholder}
          className="bg-fill2 h-12 rounded-lg px-5 text-[15px] text-text1"
          placeholderTextColor={appTheme.colors?.neutral?.tip}
          clearButtonMode="while-editing"
          editable={props.editable ?? true}
          maxLength={props.maxLength}
        />
      </View>
    );
  }
);

type FormSelectFieldProps = {
  label: string;
  value: string | undefined | null;
  placeholder?: string;
  onPress: () => void;
  required?: boolean;
  editable?: boolean;
};

export const FormSelectField: React.FC<FormSelectFieldProps> = React.memo(
  (props) => {
    const required = props.required ?? false;
    const editable = props.editable ?? true;
    const appTheme = useAppTheme();

    const haveValue = Boolean(props.value);
    const textColor = haveValue
      ? appTheme.colors?.neutral?.title
      : appTheme.colors?.neutral?.tip;

    return (
      <View className="gap-2">
        <Text className="text-text2 font-[15px]">
          {props.label}
          {required && <Text className="text-red-500 font-[16px]"> *</Text>}
        </Text>
        <TouchableOpacity
          className="bg-fill2 min-h-12 rounded-lg px-5 flex-row items-center py-3 gap-x-1"
          onPress={props.onPress}
          disabled={!editable}
        >
          <Text
            className="text-text2 text-[15px] shrink leading-6"
            style={{ color: textColor }}
          >
            {Boolean(props.value) ? props.value : props.placeholder}
          </Text>
          <View className="flex-grow" />
          {editable && (
            <Icon
              name="right"
              size={12}
              color={appTheme.colors?.neutral?.tip}
            />
          )}
        </TouchableOpacity>
      </View>
    );
  }
);
